<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<template>
  <div>
    <el-select  class="idoo-details-select" v-model="selectedValue" placeholder="请选择业务" @click="showSelector">
      <template #prefix>
        <span>{{ selectedValueLabel }}</span>
      </template>
    </el-select>
    <IdooServiceChooseDialog v-model:visible="showDialog" :title="'选择业务'" :url="'/api/business-list'" :columns="columns"
      :is-multiple="false" @selected="handleSelected" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const showDialog = ref(false)
const selectedValue = ref('')
const selectedValueLabel = ref('')

const columns = [
  { prop: 'id', label: 'ID', width: 100 },
  { prop: 'name', label: '业务名称' },
  { prop: 'code', label: '业务编码' }
]


const showSelector = () => {
  showDialog.value = true
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleSelected = (item: any) => {
  selectedValue.value = item.id
  selectedValueLabel.value = item.name
}
</script>